<template>
    <div class="exclusive">
        <div class="title">
            <span class="text">{{ title }}</span>
            <div class="line"></div>
        </div>
        <span>{{ detail }}</span>
    </div>
</template>
<script>
export default {
    name: "Title",
    props: {
        title: String,
        detail: String,
    }
}
</script>
<style lang="scss" scoped>
.exclusive {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
        position: relative;
        margin-bottom: 5px;

        .text {
            position: relative;
            z-index: 9999;
            color: #f19762;
            font-size: 20px;
            font-weight: bold;
        }

        .line {
            position: absolute;
            width: 80%;
            height: 8px;
            left: 50%;
            transform: translateX(-50%);
            bottom: -1px;
            background-color: #ffe3be;
            border-radius: 10px;
        }
    }

    span {
        color: #bcbcbc;
        font-size: 14px;
    }
}
</style>